import React from "react"
import Child from "./03.ref的子组件"

//值由react控制的表单输入元素 就称之为受控组件
//目的是为了能够在组件中灵活的获取输入元素的值
//在react中 onChange相当于是原生dom事件中的oninput事件

//组件的受控流程

//1.需要一个状态,这个状态赋值给输入元素的value属性

//2.需要使用react中的onChange事件,在事件处理函数中,通过e.target.value变更state

class Ctr extends React.Component {
    myRef1 = React.createRef() //创建一个ref引用
    myRef2 = React.createRef() //创建一个ref引用
    state = {
        val: "默认值"
    }
    //受控组件的处理函数
    handleChage = (e) => {
        console.log(e.target.value)
        this.setState({
            val: e.target.value
        })
    }
    handleClick = (e) => {
        e.preventDefault()
        alert("用户名是" + this.state.val)
    }
    //获取焦点处理函数
    handleFocus = (e) => {
        e.preventDefault()
        console.log(this.myRef1)
        //获取焦点
        this.myRef1.current.focus()
        //非受控的情况下获取输入值
        console.log(this.myRef1.current.value)

        console.log(this.myRef2)

        //修改子组件的状态
        this.myRef2.current.state.msg = "被父组件修改了";
        // this.myRef2.current.setState({
        //     msg:"被父组件修改了"
        // })
        this.setState({})
    }
    render() {
        return (
            <fieldset>
                <legend>受控组件</legend>
                <form action="http://chst.vip">
                    <label htmlFor="usn">用户名:</label>
                    <input id="usn" type="text" name="username" onChange={this.handleChage} value={this.state.val} />
                    <input type="submit" onClick={this.handleClick} value="提交" />
                    <br />
                    {/* 非受控,就是操作dom的形式获取焦点 */}
                    <input type="text" ref={this.myRef1}/>
                    <button onClick={this.handleFocus}>点击获取焦点</button>
                    <Child ref={this.myRef2}/>
                </form>
            </fieldset>
        )
    }
}

export default Ctr